<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		table,
		th,
		td {
			border: 1px solid #FF7777;
			/* 收紧单元格之间的边框 */
			border-collapse: collapse;
		}
	</style>
</head>
<body>
	<table class="table">
		<thead>
			<tr>
				<th>列1</th>
				<th>列2</th>
				<th>列3</th>
				<th>列4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<!-- 合并两行 -->
				<td rowspan="2">1</td>
				<!-- 合并两列 -->
				<td colspan="2">2</td>
				<!-- 因为被合并了两列，当前行只有3列 -->
				<td>3</td>
			</tr>
			<tr>
				<!-- 第一列，被上一行合并，当前行应该有3列，3列又都被合并到了1列 -->
				<td colspan="3">4</td>
			</tr>
		</tbody>
	</table>
</body>
</html>